<template>
  <div id="gauge">
    <div ref="myEchart" :style="{width: width + 'px',height:height + 'px'}"></div>
  </div>
</template>

<script>
import echarts from "echarts";
export default {
  name: "Gauge",
   props: {
    width: {
      type: String,
      default: '280'
    },
    height: {
      type: String,
      default: '280'
    },
},
  data() {
    return {
      chart: null,
      option: {
        series: [
          {
            name: "涨幅",
            type: "gauge",
            z: 3,
            min: -5,
            max: 5,
            splitNumber: 4,
            radius: "95%",
            axisLine: {
              // 坐标轴线
              lineStyle: {
                // 属性lineStyle控制线条样式
                width: 10,
                color: [
                  [0.5, "#FA5252"],
                  [1, "#12B886"]
                ]
              }
            },
            axisTick: {
              // 坐标轴小标记
              length: 15, // 属性length控制线长
              lineStyle: {
                // 属性lineStyle控制线条样式
                color: "auto"
              }
            },
            splitLine: {
              // 分隔线
              length: 20, // 属性length控制线长
              lineStyle: {
                // 属性lineStyle（详见lineStyle）控制线条样式
                color: "auto"
              }
            },
            axisLabel: {
              formatter: function(value) {
                return value + "%";
              },
              backgroundColor: "auto",
              borderRadius: 2,
              color: "#eee",
              padding: 3,
              textShadowBlur: 2,
              textShadowOffsetX: 1,
              textShadowOffsetY: 1,
              textShadowColor: "#222"
            },
            title: {
              fontWeight: "bolder",
              fontSize: 20
            },
            detail: {
              formatter: function(value) {
                return value + "%";
              }
            },
            data: [{ value: 0, name: "涨幅" }]
          }
        ]
      }
    };
  },
  methods: {
    init() {
      this.chart = echarts.init(this.$refs.myEchart);
      this.chart.setOption(this.option, true);
    },
    updateValue(value) {
        this.option.series[0].data[0].value = value;
       this.chart.setOption(this.option, true);
    }
  },
  mounted() {
    this.init();
    // this.$nextTick(function() {
    //         this.$on('updateValue', function(value) {
    //             console.log(value)
    //         });
    //     });
  }
};
</script>
